<template>
  <div>
    <p class="p-5 text-center text-muted border rounded" v-if="showEmpty">暂无在线视频</p>

    <div v-else class="row">
      <div class="col-md-4 p-0" v-for="(video, index) in videos" :key="index">
        <div class="m-1 cursor-pointer" @click="handleViewClick(video)">
          <div class="video-item">
            <div class="video-card">
              <div class="video-image">
                <img class="image" v-if="+video.device_status === 1" :src="video.thumbnail" />
                <div v-else class="video-tip">设备不在线</div>
              </div>
              <div>
                <i class="fa fa-play-circle-o video-play" v-if="+video.device_status === 1"></i>
                <div class="text-center video-title">
                  {{ video.device_name }}
                </div>
                <div class="video-play-dialog"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <video-dialog
      :visible.sync="viewVisible"
      :video-title="viewTitle"
      :device-id="viewDeviceId"
    ></video-dialog>
  </div>
</template>
<script>
import { getDevice } from '@/credit/views/city/self/after/rfid/index'

import VideoDialog from '@/credit/views/city/self/after/video/VideoDialog'

export default {
  components: {
    VideoDialog,
  },
  props: {
    farmId: String,
  },
  data() {
    return {
      loading: false,
      videos: [],

      viewVisible: false,
      viewDeviceId: '',
      viewTitle: '',
    }
  },
  computed: {
    showEmpty() {
      return !this.loading && this.videos.length === 0
    },
  },
  watch: {
    farmId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async getData() {
      if (!this.farmId) return

      this.loading = true
      const [res] = await this.$utils.promise(
        getDevice({
          farmId: this.farmId,
          deviceType: 'VIDEO',
        })
      )
      this.loading = false
      this.videos = res || []
    },

    onViewBeforeClose() {
      this.viewVisible = false
    },

    handleViewClick(video) {
      this.viewTitle = video.place_name
      this.viewDeviceId = video.device
      this.viewVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.video-item {
  &:hover {
    .video-play-dialog {
      opacity: 0.3;
    }
  }
  .video-play {
    display: block;
    position: absolute;
    opacity: 0.7;
    font-size: 3rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .video-play-dialog {
    background: #161823;
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
}
.video-image {
  background: $gray-400;
  width: 100%;
  height: 100%;
}
.image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.video-tip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-unline {
  font-size: 3rem;
}

.video-card {
  position: relative;
  width: 100%;
  height: 160px;
}
.video-title {
  display: block;
  color: white;
  opacity: 0.6;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #161823;
}
</style>
